<template>

    
    <div>
   
  <!-- 商品购买 -->
  <div :style="showProduct">
      <!-- 商品图片 -->
      <div :style="{width:'44%',height:'95%',float:'left','margin-left':'5%'}">
          <div :style="{width:'100%',height:'98%'}"><el-image src='https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'></el-image>
          </div>
      </div>
      <!-- 购买 -->
      <div :style="{width:'44%',height:'80%',float:'left','margin-left':'5%'}">
        <div :style="{height:'20%','font-size':'2em'}">
            <font>车库名：</font> {{productMessage.productVipName}}
        </div>
        <div :style="{height:'20%','font-size':'1em'}">
            <font >车位描述：此地附件宽阔，估计可钓鱼</font> 
        </div>
        <div :style="{height:'20%','font-size':'1em'}">
            <font >停车时间：12:00--16:00</font> 
        </div>
        <div :style="{height:'20%','font-size':'1em'}">
            <font >车位价格：每小时12元</font> 
        </div>
        <div :style="{height:'20%','font-size':'1em'}"> 
            <font >地址：重庆两江</font> 
        </div>
        <div :style="{height:'20%','font-size':'3em'}">
            <font :style="{'color':'red'}">活动价：</font> ￥10
        </div>
        <div>
            <el-button type="primary" @click="goOrder">立马抢租</el-button>
            <el-popover
                placement="top"
                width="360"
                v-model="visible">


                <iframe src="Gaodes.html" width="500px" height="500px"  ></iframe>
                <el-button slot="reference">查看位置</el-button>
            </el-popover>
        </div>
        
      </div>
  </div>
 <el-divider></el-divider>
 
   
        <!-- 评论展示 -->
    <div :style="productComment">
        <div >  
            <span class="el-icon-s-comment">用户评价</span>
            <el-divider></el-divider>
        </div>
        <div v-for="(c,index) in comments" :key="index">
            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <span>{{c.userNickname}}</span><br/>
            <span>评分<el-rate :disabled="banstar" v-model="c.commentStar"></el-rate></span><br/>
            <div>{{c.commentContent}}</div>  
            <el-divider></el-divider> 
        </div>
    </div>
    </div>
</template>

<script>
export default {
    
    name:"cardetail",
    components: {
    },
    data() {
        return{
           visible: false,
          banstar:true,
          paramspro:[],
          comments:[{star:null}
            ],
          num:1,
          showProduct:{float:'left',width:'100%',height:'500px','magrin-left':'5%'},
          productMessage:{
              productVipName:"艾尔玛车库",
              productVipPrice:"88.00",
            productImage:"empty.png",
          },
          counts:[],
          imageSize:{               
                width:"800px",
                height:"533px"
            },
            urls: [
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg'
        ],
        productComment:{"text-align":"left"},
        value:null
        
        }
    },
    methods: {
        goOrder(){
            this.$router.push({name:"subscribe"})
        }
    }
}
</script>